<template>
  <div>
    <el-form class="editInfo" ref="editInfo" :inline="false" :model="editInfo.data" :rules="editInfo.rules"
             size="small"
             label-width="120px">
      <el-row>
        <el-col :span="8">
          <div style="margin: 15px 20px; font-size: 16px; font-weight: bold; color: #333;">社保基数</div>
          <el-form-item label="养老保险缴纳基数(元)" prop="endowmentInsuranceBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.endowmentInsuranceBase" placeholder="请输入养老保险缴纳基数"
                      @blur="computeMoney"></el-input>
          </el-form-item>
          <el-form-item label="医疗保险缴纳基数(元)" prop="medicalInsuranceBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.medicalInsuranceBase" placeholder="请输入医疗保险缴纳基数"
                      @blur="computeMoney"></el-input>
          </el-form-item>
          <el-form-item label="工伤保险缴纳基数(元)" prop="inductrialInjuryInsuranceBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.inductrialInjuryInsuranceBase" placeholder="请输入工伤保险缴纳基数"
                      @blur="computeMoney"></el-input>
          </el-form-item>
          <el-form-item label="失业保险缴纳基数(元)" prop="unemploymentInsuranceBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.unemploymentInsuranceBase" placeholder="请输入失业保险缴纳基数"
                      @blur="computeMoney"></el-input>
          </el-form-item>
          <el-form-item label="生育保险缴纳基数(元)" prop="birthInsuranceBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.birthInsuranceBase" placeholder="请输入生育保险缴纳基数"
                      @blur="computeMoney"></el-input>
          </el-form-item>
          <el-form-item label="住房公积金缴纳基数(元)" prop="housingProvidentFundBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.housingProvidentFundBase" placeholder="请输入住房公积金缴纳基数"
                      @blur="computeMoney"></el-input>
          </el-form-item>

        <el-form-item label="大病医疗汇缴基数(元)" prop="seriousIllnessInsuranceBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.seriousIllnessInsuranceBase" placeholder="请输入大病医疗汇缴基数"
                      @blur="computeMoney"></el-input>
        </el-form-item>

        <el-form-item label="残疾人保障金汇缴基数(元)" prop="disabilityInsuranceFundBase" label-width="180px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.disabilityInsuranceFundBase" placeholder="请输入残疾人保障金汇缴基数"
                      @blur="computeMoney"></el-input>
        </el-form-item>


          <el-form-item label="社保服务费(元)" prop="securityCharge" label-width="180px" style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.securityCharge" placeholder="请输入社保服务费"
                      @blur="computeMoney"></el-input>
          </el-form-item>
          <el-form-item label="社保缴纳地" prop="socialInsurancePlace" label-width="180px"
                        style="margin-bottom: 30px;">
            <!--<el-input type="textarea" v-model="editInfo.data.socialInsurancePlace" rows="1" placeholder="请输入社保缴纳地"
                      style="width: 480px;"></el-input>-->
            <!-- <el-cascader style="width: 268px;"
                          v-model="editInfo.data.socialInsurancePlace"
                          :options="propsSocialInsurancePlace"
             ></el-cascader>-->
            <tree-select v-model="editInfo.data.socialInsurancePlace" :options="areaAllListData"
                         :normalizer="treeSelectProps"
                         placeholder="选择社保缴纳地"
                         style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div style="margin: 15px 20px; font-size: 16px; font-weight: bold; color: #333;">个人实际缴纳</div>
          <el-form-item label="养老保险个人缴纳(元)" prop="endowmentInsuranceP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.endowmentInsuranceP" placeholder="" @blur="computeMoney"
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="医疗保险个人缴纳(元)" prop="medicalInsuranceP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.medicalInsuranceP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="工伤保险个人缴纳(元)" prop="inductrialInjuryInsuranceP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.inductrialInjuryInsuranceP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="失业保险个人缴纳(元)" prop="unemploymentInsuranceP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.unemploymentInsuranceP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="生育保险个人缴纳(元)" prop="birthInsuranceP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.birthInsuranceP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="公积金个人缴纳(元)" prop="housingProvidentFundP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.housingProvidentFundP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="大病医疗个人缴纳(元)" prop="seriousIllnessInsuranceP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.seriousIllnessInsuranceP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="残疾人保障金个人缴纳(元)" prop="disabilityInsuranceFundP" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.disabilityInsuranceFundP" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>


          <el-form-item label="个人缴纳合计(元)" prop="securityHousingPersonal" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.securityHousingPersonal" placeholder="" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="合计(元)" prop="securityHousingSum" label-width="160px" style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.securityHousingSum" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <div style="margin: 15px 20px; font-size: 16px; font-weight: bold; color: #333;">企业实际缴纳</div>
          <el-form-item label="养老保险企业缴纳(元)" prop="endowmentInsuranceE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.endowmentInsuranceE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="医疗保险企业缴纳(元)" prop="medicalInsuranceE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.medicalInsuranceE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="工伤保险企业缴纳(元)" prop="inductrialInjuryInsuranceE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.inductrialInjuryInsuranceE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="失业保险企业缴纳(元)" prop="unemploymentInsuranceE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.unemploymentInsuranceE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="生育保险企业缴纳(元)" prop="birthInsuranceE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.birthInsuranceE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="公积金企业缴纳(元)" prop="housingProvidentFundE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.housingProvidentFundE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>


          <el-form-item label="大病医疗企业缴纳(元)" prop="seriousIllnessInsuranceE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.seriousIllnessInsuranceE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="残疾人保障金企业缴纳(元)" prop="disabilityInsuranceFundE" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.disabilityInsuranceFundE" @blur="computeMoney" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="企业缴纳合计(元)" prop="securityHousingEnterprise" label-width="160px"
                        style="margin-bottom: 30px;">
            <el-input v-model="editInfo.data.securityHousingEnterprise" placeholder=""
                      :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--
        描述：新加六险一金
      -->
      <!--<el-form-item label="大病保险个人缴纳(元)" prop="seriousIllnessInsuranceP" label-width="160px"
                    style="margin-bottom: 30px;">
        <el-input v-model="editInfo.data.seriousIllnessInsuranceP" @blur="computeMoney" placeholder="" :disabled="true"
                  style="width: 158px;"></el-input>
      </el-form-item>

      <el-form-item label="大病保险企业缴纳(元)" prop="seriousIllnessInsuranceE" label-width="160px">
        <el-input v-model="editInfo.data.seriousIllnessInsuranceE" @blur="computeMoney" placeholder="" :disabled="true"
                  style="width: 158px;"></el-input>
      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
  // import { debounce } from 'lodash'
  import { getArea } from '@/api/system/area'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import commonMixins from '@/mixins/common'

  export default {
    name: 'RecordEditSocial',
    mixins: [commonMixins],
    components: {
      TreeSelect
    },
    data() {
      let isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/
      return {
        dialog: {
          visible: false // 是否显示
        },
        formParams: { // 编辑需要的参数
          // 社保基数
          endowmentInsuranceBase: '', // 养老保险缴纳基数
          medicalInsuranceBase: '', // 医疗保险缴纳基数
          inductrialInjuryInsuranceBase: '', // 工伤保险缴纳基数
          unemploymentInsuranceBase: '', // 失业保险缴纳基数
          birthInsuranceBase: '', // 生育保险缴纳基数
          housingProvidentFundBase: '', // 住房公积金缴纳基数
          seriousIllnessInsuranceBase:'',// 大病医疗缴纳基数
          disabilityInsuranceFundBase:'',//残疾人保障金汇缴基数
          securityCharge: '', // 社保服务费
          socialInsurancePlace: undefined, // 社保缴纳地 （设置undefined可以避免unknown问题）
          // 个人实际缴纳
          endowmentInsuranceP: '', // 养老保险个人缴纳
          medicalInsuranceP: '', // 医疗保险个人缴纳
          inductrialInjuryInsuranceP: '', // 工伤保险个人缴纳
          unemploymentInsuranceP: '', // 失业保险个人缴纳
          birthInsuranceP: '', // 养老保险个人缴纳
          housingProvidentFundP: '', // 公积金个人缴纳
          seriousIllnessInsuranceP:'' ,//大病医疗个人缴纳
          disabilityInsuranceFundP:'',//残疾人保障金个人缴纳
          securityHousingPersonal: '', // 个人缴纳合计
          securityHousingSum: '', // 合计
          // 企业实际缴纳
          endowmentInsuranceE: '', // 养老保险企业缴纳
          medicalInsuranceE: '', // 医疗保险企业缴纳
          inductrialInjuryInsuranceE: '', // 工伤保险企业缴纳
          unemploymentInsuranceE: '', // 失业保险企业缴纳
          birthInsuranceE: '', // 生育保险企业缴纳
          housingProvidentFundE: '', // 公积金企业缴纳
          seriousIllnessInsuranceE:'',//大病医疗企业缴纳
          disabilityInsuranceFundE:'',//残疾人保障金企业缴纳
          securityHousingEnterprise: '', // 企业缴纳合计

        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            endowmentInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入养老保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            medicalInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入医疗保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            inductrialInjuryInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入工伤保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            unemploymentInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入失业保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            birthInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入生育保险缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            housingProvidentFundBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入住房公积金缴纳基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            seriousIllnessInsuranceBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入大病医疗汇缴基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            disabilityInsuranceFundBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入残疾人保障金汇缴基数'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],


            securityCharge: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保服务费'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            socialInsurancePlace: [
              { required: true, message: '请选择社保缴纳地', trigger: 'change' }
            ],
            endowmentInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入养老保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            endowmentInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入养老保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            medicalInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入医疗保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            medicalInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入医疗保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            inductrialInjuryInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入工伤保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            inductrialInjuryInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入工伤保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            unemploymentInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入失业保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            unemploymentInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入失业保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            birthInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入生育保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            birthInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入生育保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            seriousIllnessInsuranceP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入大病保险个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            seriousIllnessInsuranceE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入大病保险企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            
            disabilityInsuranceFundP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('残疾人保障金个人缴纳'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            disabilityInsuranceFundE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入残疾人保障金企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],

            housingProvidentFundP: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入住房公积金个人缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            housingProvidentFundE: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入住房公积金企业缴纳金额'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityHousingPersonal: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保公积金个人小计'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityHousingEnterprise: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入社保公积金企业小计'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            securityHousingSum: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入合计'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: false
          }
        },
        paymentProportion: { // 缴费比例
          ppension: 0, // 养老保险个人缴费比例
          pmedical: 0, // 医疗保险个人缴费比例
          pinjury: 0, // 工伤保险个人缴费比例
          ploseJob: 0, // 失业保险个人缴费比例
          pbirth: 0, // 生育保险个人缴费比例
          phousing: 0, // 公积金个人缴费比例
          epension: 0, // 养老保险企业缴费比例
          emedical: 0, // 医疗保险企业缴费比例
          einjury: 0, // 工伤保险个人缴费比例
          eloseJob: 0, // 失业保险个人缴费比例
          ebirth: 0, // 生育保险个人缴费比例
          ehousing: 0, // 公积金个人缴费比例
          pdisease:0, //大病医疗个人缴费比例
          edisease:0, //大病医疗企业人缴费比例
          pdeformity:0, //残疾人保障金个人缴费比例
          edeformity:0, //残疾人保障金企业人缴费比例
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      },
      areaAllListData: { // 地区
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      computedEndowmentInsurance() { // 养老保险计算
        let { endowmentInsuranceBase } = this.editInfo.data
        let { ppension, epension } = this.paymentProportion
        endowmentInsuranceBase = endowmentInsuranceBase || 0
        ppension = ppension || 0
        epension = epension || 0
        this.editInfo.data.endowmentInsuranceP = this.formatNumber({
          formula: `${endowmentInsuranceBase}*${ppension}`
        })
        this.editInfo.data.endowmentInsuranceE = this.formatNumber({
          formula: `${endowmentInsuranceBase}*${epension}`
        })
      },
      computedMedicalInsurance() { // 医疗保险计算
        let { medicalInsuranceBase } = this.editInfo.data
        let { pmedical, emedical } = this.paymentProportion
        medicalInsuranceBase = medicalInsuranceBase || 0
        pmedical = pmedical || 0
        emedical = emedical || 0
        this.editInfo.data.medicalInsuranceP = this.formatNumber({
          formula: `${medicalInsuranceBase}*${pmedical}`
        })
        this.editInfo.data.medicalInsuranceE = this.formatNumber({
          formula: `${medicalInsuranceBase}*${emedical}`
        })
      },
      computedInductrialInjuryInsurance() { // 工伤保险计算
        let { inductrialInjuryInsuranceBase } = this.editInfo.data
        let { pinjury, einjury } = this.paymentProportion
        inductrialInjuryInsuranceBase = inductrialInjuryInsuranceBase || 0
        pinjury = pinjury || 0
        einjury = einjury || 0
        this.editInfo.data.inductrialInjuryInsuranceP = this.formatNumber({
          formula: `${inductrialInjuryInsuranceBase}*${pinjury}`
        })
        this.editInfo.data.inductrialInjuryInsuranceE = this.formatNumber({
          formula: `${inductrialInjuryInsuranceBase}*${einjury}`
        })
      },
      computedUnemploymentInsurance() { // 失业保险计算
        let { unemploymentInsuranceBase } = this.editInfo.data
        let { ploseJob, eloseJob } = this.paymentProportion
        unemploymentInsuranceBase = unemploymentInsuranceBase || 0
        ploseJob = ploseJob || 0
        eloseJob = eloseJob || 0
        this.editInfo.data.unemploymentInsuranceP = this.formatNumber({
          formula: `${unemploymentInsuranceBase}*${ploseJob}`
        })
        this.editInfo.data.unemploymentInsuranceE = this.formatNumber({
          formula: `${unemploymentInsuranceBase}*${eloseJob}`
        })
      },
      computedBirthInsurance() { // 生育保险计算
        let { birthInsuranceBase } = this.editInfo.data
        let { pbirth, ebirth } = this.paymentProportion
        birthInsuranceBase = birthInsuranceBase || 0
        pbirth = pbirth || 0
        ebirth = ebirth || 0
        this.editInfo.data.birthInsuranceP = this.formatNumber({
          formula: `${birthInsuranceBase}*${pbirth}`
        })
        this.editInfo.data.birthInsuranceE = this.formatNumber({
          formula: `${birthInsuranceBase}*${ebirth}`
        })
      },
      computedHousingProvidentFund() { // 公积金计算
        let { housingProvidentFundBase } = this.editInfo.data
        let { phousing, ehousing } = this.paymentProportion
        housingProvidentFundBase = housingProvidentFundBase || 0
        phousing = phousing || 0
        ehousing = ehousing || 0
        this.editInfo.data.housingProvidentFundP = this.formatNumber({
          formula: `${housingProvidentFundBase}*${phousing}`
        })
        this.editInfo.data.housingProvidentFundE = this.formatNumber({
          formula: `${housingProvidentFundBase}*${ehousing}`
        })
      },
      computedseriousIllnessInsurance() { // 大病医疗计算
       console.log('自动计算大病医疗');
        let { seriousIllnessInsuranceBase } = this.editInfo.data //大病医疗基数
        let { pdisease, edisease } = this.paymentProportion     //大病医疗地区比例
        seriousIllnessInsuranceBase = seriousIllnessInsuranceBase || 0
        pdisease = pdisease || 0
        edisease = edisease || 0
        console.log(`大病医疗基数=${seriousIllnessInsuranceBase}`);
        console.log(`大病医疗地区比例=${pdisease},${edisease}`);
        this.editInfo.data.seriousIllnessInsuranceP = this.formatNumber({
          formula: `${seriousIllnessInsuranceBase}*${pdisease}`
        })
        this.editInfo.data.seriousIllnessInsuranceE = this.formatNumber({
          formula: `${seriousIllnessInsuranceBase}*${edisease}`
        })
        
      },

      computeddisabilityInsuranceFund() { // 残疾人保障金计算
      console.log('自动计算残疾人保障金');
        let { disabilityInsuranceFundBase } = this.editInfo.data //残疾人保障金基数
        let { pdeformity, edeformity } = this.paymentProportion     //残疾人保障金地区比例
        disabilityInsuranceFundBase = disabilityInsuranceFundBase || 0
        pdeformity = pdeformity || 0
        edeformity = edeformity || 0
        console.log(`计算残疾人保障金基数=${disabilityInsuranceFundBase}`);
        console.log(`计算残疾人保障金地区比例=${pdeformity},${edeformity}`);
        this.editInfo.data.disabilityInsuranceFundP = this.formatNumber({
          formula: `${disabilityInsuranceFundBase}*${pdeformity}`
        })
        this.editInfo.data.disabilityInsuranceFundE = this.formatNumber({
          formula: `${disabilityInsuranceFundBase}*${edeformity}`
        })
        
      },


      

      /**
       * 2020-3-28 增加大病医疗和残障人保障金
       */
      computedPersonalSocialSecurity() { // 个人社保缴纳计算
        let { endowmentInsuranceP, medicalInsuranceP, inductrialInjuryInsuranceP, unemploymentInsuranceP, birthInsuranceP, housingProvidentFundP,seriousIllnessInsuranceP,disabilityInsuranceFundP } = this.editInfo.data
        endowmentInsuranceP = endowmentInsuranceP || 0
        medicalInsuranceP = medicalInsuranceP || 0
        inductrialInjuryInsuranceP = inductrialInjuryInsuranceP || 0
        unemploymentInsuranceP = unemploymentInsuranceP || 0
        birthInsuranceP = birthInsuranceP || 0
        housingProvidentFundP = housingProvidentFundP || 0
        seriousIllnessInsuranceP = seriousIllnessInsuranceP || 0
        disabilityInsuranceFundP = disabilityInsuranceFundP || 0
        //个人合计
        this.editInfo.data.securityHousingPersonal = this.formatNumber({
          formula: `${endowmentInsuranceP}  + ${medicalInsuranceP} + ${inductrialInjuryInsuranceP} + ${unemploymentInsuranceP}  + ${birthInsuranceP} + ${housingProvidentFundP} + ${seriousIllnessInsuranceP} + ${disabilityInsuranceFundP}`
        })
      },
      computedEnterpriseSocialSecurity() { // 企业社保缴纳计算
        let { endowmentInsuranceE, medicalInsuranceE, inductrialInjuryInsuranceE, unemploymentInsuranceE, birthInsuranceE, housingProvidentFundE,seriousIllnessInsuranceE,disabilityInsuranceFundE } = this.editInfo.data
        endowmentInsuranceE = endowmentInsuranceE || 0
        medicalInsuranceE = medicalInsuranceE || 0
        inductrialInjuryInsuranceE = inductrialInjuryInsuranceE || 0
        unemploymentInsuranceE = unemploymentInsuranceE || 0
        birthInsuranceE = birthInsuranceE || 0
        housingProvidentFundE = housingProvidentFundE || 0
        //企业合计
        this.editInfo.data.securityHousingEnterprise = this.formatNumber({
          formula: `${endowmentInsuranceE}  + ${medicalInsuranceE} + ${inductrialInjuryInsuranceE} + ${unemploymentInsuranceE}  + ${birthInsuranceE} + ${housingProvidentFundE} + ${seriousIllnessInsuranceE} + ${disabilityInsuranceFundE}`
        })
      },
      computedSum() { // 合计
        let { securityHousingPersonal, securityHousingEnterprise, securityCharge } = this.editInfo.data
        securityHousingPersonal = securityHousingPersonal || 0
        securityHousingEnterprise = securityHousingEnterprise || 0
        securityCharge = securityCharge || 0
        //合计
        this.editInfo.data.securityHousingSum = this.formatNumber({
          formula: `${securityHousingPersonal}  + ${securityHousingEnterprise} + ${securityCharge}`
        })
      },
      computeMoney() {
        console.log(`自动计算开始`)
     
        this.computedEndowmentInsurance()  
       
        this.computedMedicalInsurance()
        this.computedInductrialInjuryInsurance()
        this.computedUnemploymentInsurance()
        this.computedBirthInsurance()
        this.computedHousingProvidentFund()
        this.computedseriousIllnessInsurance()  //大病医疗计算
        this.computeddisabilityInsuranceFund()  //残疾人保障金计算
        
        this.computedPersonalSocialSecurity()
        this.computedEnterpriseSocialSecurity() 
        this.computedSum()
      },
      async getAreaDetailData(data) { // 地区详情－请求数据
        console.log('本次选择的地区：',data);
        try {
          let response = await getArea(data)
          let result = response
          console.log(result);
          if (+result.code === 200) {
            this.paymentProportion.ebirth = result.data ? result.data.ebirth : 0
            this.paymentProportion.ehousing = result.data ? result.data.ehousing : 0
            this.paymentProportion.einjury = result.data ? result.data.einjury : 0
            this.paymentProportion.eloseJob = result.data ? result.data.eloseJob : 0
            this.paymentProportion.emedical = result.data ? result.data.emedical : 0
            this.paymentProportion.epension = result.data ? result.data.epension : 0
            this.paymentProportion.pbirth = result.data ? result.data.pbirth : 0
            this.paymentProportion.phousing = result.data ? result.data.phousing : 0
            this.paymentProportion.pinjury = result.data ? result.data.pinjury : 0
            this.paymentProportion.pmedical = result.data ? result.data.pmedical : 0
            this.paymentProportion.ploseJob = result.data ? result.data.ploseJob : 0
            this.paymentProportion.ppension = result.data ? result.data.ppension : 0

            this.paymentProportion.edisease = result.data ? result.data.edisease : 0 //大病医疗企业比例
            this.paymentProportion.pdisease = result.data ? result.data.pdisease : 0 //大病医疗个人比例
            this.paymentProportion.edeformity = result.data ? result.data.edeformity : 0 //残疾人保障金企业比例
            this.paymentProportion.pdeformity = result.data ? result.data.pdeformity : 0 //残疾人保障金个人比例
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '获取失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '获取失败！'
          })
        }
      },
      async resetEditData(data = null) { // 重置编辑表单
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = JSON.parse(JSON.stringify(this.formParams))
        if (data) { // 编辑
          // this.editInfo.id = data.uuid
          this.editInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            this.editInfo.data[item] = data[item]
          })
          this.editInfo.disabled = true
        }
      },
      async initData(data = null) { // 初始化数据
        //console.log(data.disabilityInsuranceFundBase)
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible: {
        handler: function(newVal, oldVal) {
          if (newVal !== this.dialog.visible) {
            this.dialog.visible = newVal
            if (newVal) {
              this.initData(this.detailData)
            }
          }
        },
        immediate: true
      },
      detailData: {
        handler: function(newVal, oldVal) {
          this.initData(newVal)
        },
        deep: true,
        immediate: true
      },
      'editInfo.data': {
        handler: function(newVal, oldVal) {
          // console.log(newVal)
          this.$emit('on-input', newVal)
        },
        deep: true,
        immediate: true
      },
      'editInfo.data.socialInsurancePlace': {
        handler: async function(newVal) {
          console.log('地区变更');
          if (`${newVal}` !== '') {
            await this.getAreaDetailData(newVal)
            this.computeMoney()
          }
        },
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .edit-box {
    & /deep/ .el-dialog {
      min-width: 900px;
      max-width: 1200px;
    }

    & /deep/ .el-dialog__body {
      padding: 10px 20px 30px;
    }

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }
  }

  .editInfo {
    margin-right: 0;

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 68px;
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 8px;
  }

</style>
